<template>
  <div class="app-container" id="Coupon">
    <!-- 查询和其他操作 -->
    <div class="filter-container" style="float:right">
      <el-input v-model="listQuery.name" clearable class="filter-item" style="width:200px" placeholder="请输入优惠卷标题">
      </el-input>
      <el-select v-model="listQuery.type" clearable class="filter-item" style="width:200px" placeholder="请输入优惠券类型">
        <el-option v-for="type in typeOptions" :key="type.value" :label="type.label" :value="type.value"></el-option>
      </el-select>
      <el-select v-model="listQuery.status" clearable class="filter-item" style="width:200px" placeholder="请输入优惠券状态">
        <el-option v-for="type in statusOptions" :key="type.value" :label="type.label" :value="type.value"></el-option>
      </el-select>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handledFilter">查询</el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="handleAdd">新增</el-button>
    </div>
    <!-- 表格数据 -->
    <el-table :data="tableData" style="width: 100%" border fit highlight-current-row>
      <el-table-column prop="id" align="center" label="优惠券ID" sortable width="120">
      </el-table-column>
      <el-table-column prop="name" align="center" label="优惠券名称" width="180">
      </el-table-column>
      <el-table-column prop="desc" align="center" label="介绍">
      </el-table-column>
      <el-table-column prop="tag" align="center" label="标签">
      </el-table-column>
      <el-table-column prop="min" align="center" label="最低消费">
        <template slot-scope="scope">减免{{scope.row.min}}元可用</template>
      </el-table-column>
      <el-table-column prop="discount" align="center" label="满减金额">
        <template slot-scope="scope">减免{{scope.row.discount}}元可用</template>
      </el-table-column>
      <el-table-column prop="limit" align="center" label="每人限领">
        <template slot-scope="scope">{{scope.row.limit !=0 ? scope.row.limit : '不限'}}</template>
      </el-table-column>
      <el-table-column prop="goodsType" align="center" label="商品使用范围">
      </el-table-column>
      <el-table-column prop="type" align="center" label="优惠券类型">
        <template slot-scope="scope">
          {{scope.row.type | formatType }}
        </template>
      </el-table-column>
      <el-table-column prop="total" align="center" label="优惠卷数量">
        <template slot-scope="scope">{{scope.row.total !=0 ? scope.row.total : '不限'}}</template>
      </el-table-column>
      <el-table-column prop="status" align="center" label="状态">
        <template slot-scope="scope">
          {{scope.row.status | formatStatus(statusOptions) }}
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="280">
        <template slot-scope="scope">
          <el-button @click="handleDetails(scope.row)" type="primary" size="small">详情</el-button>
          <el-button @click="handleUpdate(scope.row)" type="primary" size="small" >编辑</el-button>
          <el-button @click="handleDelete(scope.row)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
      @pagination="getList" />
    <el-dialog :title="dialogStatus" :visible.sync="dialogFromVisible">
      <el-form ref="dataForm" :rules="rules" :model="dataForm" label-width="100px" size="mini"
        style="width: 400px;margin-left: 20px;">
        <el-form-item label="优惠券名称" prop="name">
          <el-input v-model="dataForm.name"></el-input>
        </el-form-item>
        <el-form-item label="介绍" prop="desc">
          <el-input v-model="dataForm.desc"></el-input>
        </el-form-item>
        <el-form-item label="标签" prop="tag">
          <el-input v-model="dataForm.tag"></el-input>
        </el-form-item>
        <el-form-item label="最低消费" prop="min">
          <el-input v-model="dataForm.min">
              <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="满减金额" prop="discount">
            <el-input v-model="dataForm.discount">
                <template slot="append">元</template>
            </el-input>
        </el-form-item>
        <el-form-item label="每人限领" prop="limit">
            <el-input v-model="dataForm.limit">
                <template slot="append">张</template>
            </el-input>
        </el-form-item>
        <el-form-item label="分发类型" prop="type">
          <el-select v-model="dataForm.type" placeholder="请选择">
            <el-option v-for="type in typeOptions" :key="type.value" :value="type.value" :label="type.label" />
          </el-select>
        </el-form-item>
        <el-form-item label="优惠券数量" prop="total">
            <el-input v-model="dataForm.total">
                <template slot="append">张</template>
            </el-input>
        </el-form-item>
        <el-form-item label="有效期">
            <!-- <el-radio-group v-model="dataForm.timeType">
                <el-radio-button lable="0">领券相对天数</el-radio-button>
                <el-radio-button lable="1">指定绝对时间</el-radio-button>
            </el-radio-group> -->
            <el-radio-group v-model="dataForm.timeType" size="mini" @input="changeTime">
                <el-radio-button label="0">领券相对天数</el-radio-button>
                <el-radio-button label="1">指定绝对时间</el-radio-button>
            </el-radio-group>
        </el-form-item>
        <el-form-item v-show="dataForm.timeType == 0">
            <el-input v-model="dataForm.days">
                <template slot="append">天</template>
            </el-input>
        </el-form-item>
        <el-form-item v-show="dataForm.timeType == 1">
            <div style="display: flex;">
                <el-date-picker v-model="dataForm.startTime" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;"/>
                <span>至</span>
                <el-date-picker v-model="dataForm.endTime" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;"/>
            </div>
        </el-form-item>
        <el-form-item label="商品限制范围">
            <el-radio-group v-model="dataForm.goodsType" size="mini">
                <el-radio-button label="0">全场通用</el-radio-button>
                <el-radio-button label="1">指定分类</el-radio-button>
                <el-radio-button label="2">指定商品</el-radio-button>
            </el-radio-group>
        </el-form-item>
        <el-form-item v-show="dataForm.goodsType != 0">
            目前不支持
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFromVisible = false">取消</el-button>
        <el-button v-if="dialogStatus === '新增'" type="primary" @click="createData">确定</el-button>
        <el-button v-else type="primary" @click="updateData">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import Pagination from '@/components/Pagination'
  import {
    listCoupon,
    createCoupon,
    updateCoupon,
    deleteCoupon
  } from '@/api/activity/coupon'
  const typeOptions = [{
      label: '通用领券',
      value: 0
    },
    {
      label: '注册赠券',
      value: 1
    },
    {
      label: '兑换码',
      value: 2
    }
  ]
  //   let that;
  export default {
    name: 'Coupon',
    components: {
      Pagination
    },
    //filters获取data中的值
    // 1、定义全局变量that，that = this
    // 2、通过传值的方式
    filters: {
      formatType(type) {
        for (var i = 0; i < typeOptions.length; i++) {
          if (type === typeOptions[i].value) {
            return typeOptions[i].label
          }
        }
      },
      formatStatus(status, statusOptions) {
        for (var i = 0; i < statusOptions.length; i++) {
          if (status === statusOptions[i].value) {
            return statusOptions[i].label
          }
        }
      }
    },
    beforeCreate() {
      //   that = this
    },
    data() {
      return {
        typeOptions,
        //查询表单
        listQuery: {
          page: 1,
          limit: 10,
          name: '',
          type: '',
          status: ''
        },
        //状态字典值
        statusOptions: [{
            label: '正常',
            value: 0
          },
          {
            label: '已过期',
            value: 1
          },
          {
            label: '已下架',
            value: 2
          }
        ],
        //表格数据
        tableData: [],
        //总条数
        total: 0,
        //表单数据
        dialogStatus: '新增',
        dialogFromVisible: false,
        dataForm: {
           name: '',
           desc: '',
           tag: '',
           min: '',
           discount: '',
           limit: '',
           type: '',
           total: '',
           timeType: 0,
           days: '',
           startTime: '',
           endTime: '',
           goodsType: ''
        },
        rules: {
           name: [{ required: true, message: '优惠券标题不能为空', trigger: 'blur' }]
        }
      }
    },
    created() {
      //获取列表数据
      this.getList();
    },
    methods: {
      //获取表格数据
      getList() {
        listCoupon(this.listQuery).then(res => {
          this.tableData = res.data.data.list;
          this.total = res.data.data.total;
        })
      },
      //筛选数据
      handledFilter() {
        this.listQuery.page = 1;
        this.getList();
      },
      //重置表单
      resetForm(){
        this.dataForm = {
           name: '',
           desc: '',
           tag: '',
           min: '',
           discount: '',
           limit: '',
           type: '',
           total: '',
           timeType: 0,
           days: '',
           startTime: '',
           endTime: '',
           goodsType: 0
        }
      },
      //监听有效期
      changeTime(val){
        console.log(val);
        if(val == 0){
            this.dataForm.startTime = '';
            this.dataForm.endTime = '';
        }else{
            this.dataForm.days = '';
        }
      },
      //打开新增
      handleAdd() {
        this.resetForm();
        this.dialogStatus = '新增'
        this.dialogFromVisible = true;
        this.$nextTick(() => {
            this.$refs['dataForm'].clearValidate()
        })
      },
      //确定新增
      createData(){
        this.$refs['dataForm'].validate(valid => {
            if(valid){
                createCoupon(this.dataForm).then(res =>{
                    this.getList();
                    this.dialogFromVisible = false;
                    this.$notify.success({
                        title: ' 成功',
                        message: '新增优惠券成功'
                    })
                })
            }
        })
      },
      //打开修改
      handleUpdate(row){
        this.dataForm = Object.assign({},row);
        this.dialogStatus = '编辑';
        this.dialogFromVisible = true;
      },
      //确定修改
      updateData(){
        this.$refs['dataForm'].validate(valid => {
            if(valid){
                updateCoupon(this.dataForm).then(res =>{
                    this.getList();
                    this.dialogFromVisible = false;
                    this.$notify.success({
                        title: ' 成功',
                        message: '修改优惠券成功'
                    })
                })
            }
        })
      },
      //打开修改模态框
      handleUpdate(row) {
        this.dataForm = Object.assign({}, row);
        this.dialogStatus = '修改';
        this.dialogFromVisible = true;
      },
      //确定修改
      updateData(){
        this.$refs['dataForm'].validate(valid => {
          if(valid){
            updateCoupon(this.dataForm).then(()=>{
              this.dialogFromVisible = false;
              this.getList();
              this.$notify.success({
                title: '成功',
                message: '修改成功'
              })
            })
          }
        })
      },
      //删除
      handleDelete(row) {
        this.$confirm('此操作将删除该品牌商，是否继续？','提示',{
          confirmButtonText: '确定',
          concelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteCoupon(row).then(res => {
            this.getList();
            this.$notify.success({
              title: '成功',
              message: '删除成功'
            })
          })
        }).catch(() => {
           this.$message({
             type: 'info',
             message: '已取消删除'
           })
        })
      },
      handleDetails(row){
        this.$router.push({path:'/activity/couponDetail',query:{id:row.id}})
      }
    }
  }

</script>
<style scoped>
</style>
